// normal input
input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
textarea
  @include input-radius-box()
  height: $input-height

textarea
  resize: none

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button
  -webkit-appearance: none
  margin: 0
input[type=number]
  -moz-appearance: textfield


// special input
.input-checkbox,
.input-radio
  height: $input-height
  display: inline-flex
  align-items: center

  input[type="radio"],
  input[type="checkbox"]
    margin-right: 4px
    opacity: 0

.input-message-error
  color: $brand-danger

// 有addon的表单需要在右侧留出40px的padding，为addon留出位置
.fui-form[addon]
  padding-right: 2.5rem

.fui-form-item
  // 为addon定位
  position: relative
  display: flex
  margin-bottom: $form-item-margin-bottom
  font-size: $input-base-size

  > label
    display: block
    flex: 0 1 auto
    line-height: $form-item-line-height
    text-align: right
    padding-right: 1rem
    @include text-ellipsis()

    span
      color: $brand-danger

  &-body
    flex: 1

  // @deprecated
  &-text
    padding-top: 9px

  &-text2
    height: $form-item-line-height
    line-height: $form-item-line-height

  &-with-error
    margin-bottom: 4px

  .fui-switch
    line-height: $form-item-line-height

.fui-form-item-addon
  margin-left: .75rem
  position: absolute
  top: $form-item-line-height / 2
  left: 100%
  transform: translateY(-50%)

.fui-input-group
  display: flex
  position: relative

  input
    flex-grow: 1

    &:not(:first-child)
      padding-left: 2rem

    &:not(:last-child)
      padding-right: 2rem

  .fui-icon
    position: absolute
    top: 50%
    transform: translateY(-50%)

    &:first-child
      left: .5rem

    &:last-child
      right: .5rem

.fui-input,
.fui-input-number
  display: inline-block

input[type="text"]:disabled,
input[type="number"]:disabled,
input[type="password"]:disabled,
input[type="email"]:disabled,
textarea:disabled
  color: $text-mute
  background-color: $bg-disabled

input[type="text"]:read-only,
input[type="number"]:read-only,
input[type="password"]:read-only,
input[type="email"]:read-only,
textarea:read-only
  background-color: $bg-disabled

.fui-textarea
  display: inline-block

  textarea
    width: 100%
    height: 100%

  &-resize-vertical
    textarea
      resize: vertical

input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
textarea
  &.fui-input-invalid
    border: 1px solid $input-error-border-color

svg
  .fui-input-invalid-icon
    fill: $input-error-border-color

.fui-radio-btn-group
  display: flex
  flex-wrap: wrap

  .fui-radio-item

    &:not(:first-of-type) .input-radio
      border-left: none

      &:before
        position: absolute
        display: block
        content: ""
        top: -1px
        left: -1px
        width: 1px
        height: calc(100% + 2px)
        background-color: $brand-default
        z-index: -1

    &:last-of-type .input-radio
      border-top-right-radius: 2px
      border-bottom-right-radius: 2px

    &:first-of-type .input-radio
      border-top-left-radius: 2px
      border-bottom-left-radius: 2px

    .input-radio
      position: relative
      display: inline-flex
      align-items: center
      padding: 0.5rem 2rem
      border: 1px solid $border-mute
      white-space: nowrap
      cursor: pointer

      input[type="radio"]
        display: none

    &.selected

      .input-radio
        color: $text-reverse
        background: $brand-primary
        border-color: $brand-primary

        &:before
          background-color: $brand-primary
          z-index: 1

.fui-radio-link-group
  display: flex
  flex-wrap: wrap

  .fui-radio-item
    position: relative

    .input-radio
      display: inline-flex
      position: relative
      align-items: center
      padding: 0.5rem 2rem
      white-space: nowrap
      cursor: pointer

      input[type="radio"]
        display: none

    &.selected
      .input-radio
        color: $brand-primary

  .fui-radio-item:not(:last-of-type)
    .input-radio:before
      content: '|'
      position: absolute
      right: 0
      top: 50%
      transform: scale(0.8) translateY(-60%)
      color: $text-mute

.fui-radio-group:not(.fui-radio-btn-group):not(.fui-radio-link-group)

  .input-radio
    &:before
      content: ""
      position: relative
      left: $input-base-size
      display: inline-block
      width: $input-base-size
      height: $input-base-size
      margin-left: -$input-base-size
      border: 1px solid $input-border-color
      border-radius: 50%
      background-color: $bg-body
      transition: border 0.15s ease-in-out

  .fui-radio-item
    &.selected
      &.disabled
        .input-radio
          &:after
            border-color: $input-disabled-color

      .input-radio
        position: relative

        &:after
          content: " "
          position: absolute
          left: 0
          top: 50%
          transform: translateY(-50%)
          display: inline-block
          width: $input-base-size
          height: $input-base-size
          border: 4px solid $brand-primary
          border-radius: 50%
          background-color: $text-reverse

.input-checkbox
  &:before
    content: ""
    position: relative
    left: $input-base-size
    display: inline-block
    width: $input-base-size
    height: $input-base-size
    margin-left: -$input-base-size
    border: 1px solid $input-border-color
    border-radius: 2px
    background-color: $bg-body

.fui-checkbox, .fui-checkbox-item

  &.selected
    &.disabled
      .input-checkbox
        &:after
          border-color: $input-disabled-color
          background-color: $input-disabled-color

    .input-checkbox
      position: relative

      &:after
        content: " "
        position: absolute
        left: 0
        top: 50%
        transform: translateY(-50%)
        display: inline-block
        width: $input-base-size
        height: $input-base-size
        border-radius: 2px
        background-color: $input-checked-color
        background-size: 10px
        background-image: url('')
        background-repeat: no-repeat
        background-position: center

  &.half-selected
    &.disabled
      .input-checkbox
        &:after
          border-color: $input-disabled-color
          background-color: $input-disabled-color

    .input-checkbox
      position: relative

      &:after
        content: " "
        position: absolute
        left: 0
        top: 50%
        transform: translateY(-50%) translateX(3px)
        display: inline-block
        width: 8px
        height: 8px
        border-radius: 2px
        background-color: $brand-primary
        background-size: 10px

.fui-switch
  display: inline-block

  &-inner
    position: relative
    display: inline-block
    height: $input-switch-height
    min-width: 40px
    line-height: $input-switch-height - 2px
    vertical-align: middle
    border-radius: $input-switch-height / 2
    border: 1px solid transparent
    background-color: $input-disabled-color
    cursor: pointer
    transition: all 0.36s
    user-select: none

    &:after
      position: absolute
      width: $input-switch-height - 4px
      height: $input-switch-height - 4px
      left: 1px
      top: 1px
      border-radius: 18px
      background-color: $bg-body
      content: ""
      cursor: pointer
      transition: all 0.36s ease-in-out

    &:active:after
      width: 24px

  &.selected

    .fui-switch-inner
      background-color: $brand-success

      &:after
        left: 100%
        transform: translateX(-100%)
        margin-left: -1px

  &.disabled,
  &.readonly

    .fui-switch-inner
      opacity: 0.4

      &:active:after
        width: $input-switch-height - 4px

::placeholder
  color: $input-placeholder-color
  opacity: 1
